<template>
  <div class="center">
    <div class="list-left px-15">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="正在发送" name="first">
          <div class="progress">
            <el-progress :stroke-width="10"
              :percentage="currentTask ? (currentTask.personIndex / currentTask.contrast.length * 100) : 0"
              style="width: 90%;">
              <div slot="text">
                {{ currentTask ? `${currentTask.personIndex}/${currentTask.contrast.length}` : '0/0' }}
              </div>
            </el-progress>
            <el-button size="small" type="primary" @click="start"
              :disabled="currentTask ? (currentTask.state == 1 ? true : false) : true">开始</el-button>
            <el-button size="small" type="primary" @click="stop">停止</el-button>
          </div>
          <div class="cardList">
            <el-scrollbar>
              <div v-for="item in nowTaskList" :key="item.id">
                <el-card class="card" shadow="hover" body-style="padding: 10px" @click="showDetail(item)">
                  <el-row style="margin-bottom: 5px;">
                    <el-col :span="4">
                      <el-tag type="info">{{ item.content[0].type }}</el-tag>
                    </el-col>
                    <el-col :span="16">
                      <el-text style="width: 90%;line-height: 2;" line-clamp="1">{{ item.content[0].content }}</el-text>
                    </el-col>
                    <el-col :span="4" style="color: #409EFF; font-size: 14px;text-align: right;">
                      {{ state[item.state] }}
                    </el-col>
                  </el-row>
                  <el-row style="color: gray;">
                    <el-col :span="6">{{ item.createTime }}</el-col>
                    <el-col :span="4">{{ item.content.length }}条内容</el-col>
                    <el-col :span="4">{{ item.contrast.length }}个对象</el-col>
                    <el-col :span="4">{{ item.type == 0 ? '即时发送' : '定时发送' }}</el-col>
                    <el-col :span="6" @click.stop="cancel(item)" style="text-align: right;">
                      <el-text class="text" style="font-size: 12px;">取消</el-text>
                    </el-col>
                  </el-row>
                </el-card>
              </div>
            </el-scrollbar>
          </div>
        </el-tab-pane>
        <el-tab-pane label="发送记录" name="second">
          <el-button size="small" type="primary" @click="clearLog">清空日志</el-button>
          <div class="log-container">
            <div v-for="(log, index) in logList" :key="index" class="log-item">
              {{ log }}
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="定时任务" name="third">
          <div class="cardList" style="height: 80vh;">
            <el-scrollbar>
              <div v-for="item in timedTaskList" :key="item.id">
                <el-card class="card" shadow="hover" body-style="padding: 10px" @click="showDetail(item)">
                  <el-row style="margin-bottom: 5px;">
                    <el-col :span="4">
                      <el-tag type="info">{{ item.content[0].type }}</el-tag>
                    </el-col>
                    <el-col :span="16">
                      <el-text style="width: 90%;line-height: 2;" line-clamp="1">{{ item.content[0].content }}</el-text>
                    </el-col>
                    <el-col :span="4" @click.stop="cancel0(item)"
                      style="color: #F56C6C; font-size: 14px;text-align: right;">
                      删除
                    </el-col>
                  </el-row>
                  <el-row style="color: gray;">
                    <!-- <el-col :span="6">{{ item.timeTag }}</el-col> -->
                    <el-col :span="4">{{ item.content.length }}条内容</el-col>
                    <el-col :span="4">{{ item.contrast.length }}个对象</el-col>
                    <el-col :span="12">{{ item.type == 0 ? '即时发送' : '定时发送' }}：{{ item.timeTag }}</el-col>
                  </el-row>
                </el-card>
              </div>
            </el-scrollbar>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="list-right">
      <el-button size="small" type="primary" @click="newTask">新建任务</el-button>
      <el-button size="small" @click="notice">发送公告</el-button>
      <el-button size="small" @click="config">发送配置</el-button>
      <div class="detail">
        <FontIcon iconName="Tickets" />
        <span class="label">详情</span>
      </div>
      <div style="width: 250px;">
        <el-tabs v-model="activeTab2">
          <el-tab-pane label="发送内容" name="first">
            <div class="tab2">
              <el-scrollbar height="70vh">
                <div class="w-full">
                  <TableGrid :item="currentContent" />
                </div>
              </el-scrollbar>
            </div>
          </el-tab-pane>
          <el-tab-pane label="发送对象" name="second">
            <div class="tab2">
              <el-scrollbar height="70vh">
                <div class="w-full">
                  <CardGrid :item="currentContrast" />
                </div>
              </el-scrollbar>
            </div>

          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
  <SendConfig></SendConfig>
  <el-dialog title="公告" v-model="showNotice" width="60%">
    <span>请合理设置发送间隔</span>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
import emitter from "@/utils/mitt-bus";
import FontIcon from "@/components/FontIcon/index.vue";
import TableGrid from "./TableGrid.vue";
import CardGrid from "./CardGrid.vue";
import SendConfig from "./SendConfig.vue"

export default {
  data() {
    return {
      currentContrast: [],
      currentContent: [],
      activeTab: 'first',
      activeTab2: 'first',
      state: {
        0: '等待',
        1: '执行中',
        2: '暂停',
        3: '取消',
        4: '完成'
      },
      showNotice: false,
    };
  },
  components: {
    FontIcon,
    CardGrid,
    TableGrid,
    SendConfig,
  },
  computed: {
    ...mapState({
      nowTaskList: (state) => state.task.nowTaskList,
      timedTaskList: (state) => state.task.timedTaskList,
      currentTask: (state) => state.task.nowTaskList[0],
      logList: (state) => state.task.logList,
    }),
  },
  mounted() {
  },
  methods: {
    newTask() {
      emitter.emit('switchToTaskDetail')
    },
    notice() {
      this.showNotice = true
      // this.$store.dispatch("addTimedTask", {
      //   content: [{
      //     id: 1,
      //     type: 'image',
      //     content: '11',
      //   }], contrast: [{
      //     "nickname": "丰巢",
      //     "pinyin": "FC",
      //     "pinyinAll": "fengchao",
      //     "remark": "",
      //     "type": 3,
      //     "verifyFlag": 0,
      //     "wxid": "gh_8af26018baae"
      //   }], time: '*/5 * * * * *'
      // })
    },
    config() {
      emitter.emit('openConfigDialog')
      // this.currentContrast.push({
      //   "nickname": "丰巢",
      //   "pinyin": "FC",
      //   "pinyinAll": "fengchao",
      //   "remark": "",
      //   "type": 3,
      //   "verifyFlag": 0,
      //   "wxid": "gh_8af26018baae"
      // })
    },
    showDetail(item) {
      this.currentContent = item.content
      this.currentContrast = item.contrast
    },
    start() {
      this.$store.dispatch("startNowTask")
    },
    stop() {
      this.$store.dispatch("stopNowTask")
    },
    cancel(item) {
      this.$store.dispatch("cancelNowTask", { task: item })
    },
    cancel0(item) {
      this.$store.dispatch("cancelTimedTask", { task: item })
    },
    clearLog() {
      this.$store.commit("clearLog")
    },
  },
};
</script>

<style lang="scss" scoped>
.center {
  width: calc(100vw - 68px);
  height: calc(100vh - 36px);
  padding-top: 5px;
  display: flex;
  background-color: rgb(242, 242, 242);
}

.list-left {
  width: calc(100% - 280px);
  height: 100%;
  margin: 0 5px;
  border-right: 1px solid var(--color-border-default);
  font-size: 12px;
  background-color: white;
}

.list-right {
  width: 280px;
  height: 100%;
  // margin-right: 5px;
  padding: 5px 15px 0;
  background-color: white;
}

.detail {
  display: flex;
  align-items: center;
  margin: 25px 0 5px;
}

.cardList {
  background-color: rgb(242, 242, 242);
  padding: 0px 5px;
  height: 75vh;
}

.card {
  width: 98%;
  height: 65px;
  margin: 5px 0;
  cursor: pointer;
}

.progress {
  margin-bottom: 5px;
  height: 25px;
  width: 100%;
  display: flex;
}

.tab2 {
  width: 100%;
  height: 100%;
}

.text {
  &:hover {
    color: #F56C6C;
    cursor: pointer;
  }
}

.log-container {
  border: 1px solid #ccc;
  width: 50vw;
  height: 75vh;
  overflow-y: auto;
  margin-top: 10px;
}

.log-item {
  padding: 5px;
  border-bottom: 1px solid #eee;
  overflow: hidden;
  /* 新增：将超出部分隐藏 */
  white-space: nowrap;
  /* 新增：文本不换行 */
  text-overflow: ellipsis;
  /* 新增：超出部分显示省略号 */
}
</style>
@/api/wx@/plugins/task